<template>
  <div>
    <page-bg class="page-bg" title="工具"></page-bg>
    <n-grid item-responsive>
      <n-gi span="1 800:1 1200:4" />
      <n-gi span="22 800:22 1200:16">
        <div class="touch-fish" :class="sideTheme">
          <n-grid x-gap="12" :cols="15" item-responsive>
            <n-gi span="5 600:3" v-for="item in list"  :key="item.id" @click="toDetail(item)">
              <fish-card :title="item.title" :container="item.container" :bgUrl="item.bgUrl"></fish-card>
            </n-gi>
            <n-gi span="1 800:0" />
          </n-grid>
        </div>
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup name="TouchFish">
import PageBg from "@/components/PageBg/index.vue"
import FishCard from "@/components/FishCard/index.vue"
import { useSettingsStore } from "@/store"
import { getToolsList } from "@/api/home.js"
import { onMounted, ref } from "vue"
import { useRouter } from 'vue-router'
const router = useRouter()

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

let list = ref([])

const toDetail = (item) => {
  router.push({ 
    name: item.route
  })
}

onMounted(()=>{
  getToolsList().then(res=>{
    list.value = res.list;
  })
})
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.page-bg {
  width: 100%;
  height: 400px;
}
.touch-fish {
  box-sizing: border-box;
  margin-top: 20px;
  padding: 40px 35px;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
}

.theme-dark {
  background: rgba(0, 0, 0, 0.5)!important;
  color: rgba(255,255,255,0.9);
}
</style>